<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <!--Inicia la composicion de la pagina en la plantilla-->
    <ui:composition template="/resources/default/template/plantilla.xhtml">

        <!--Segmento que define el contenido del header-->
        <ui:define name="head">
            <h:head>
                <f:loadBundle basename="monitoring.general.label_#{logged.loggedIdiom}" var="label" />
                <f:loadBundle basename="monitoring.general.message_#{logged.loggedIdiom}" var="message" />
                <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"/>
                <title><h:outputText value="#{label.title1}"/></title>

                <script type="text/javascript">
                    function isActive(title, detail) {
                        if (timer.isActive()) {
                            growl.renderMessage({summary: title, detail: detail, severity: 0});
                            return false;
                        }
                        else
                            return true;
                    }
                </script>
            </h:head>
        </ui:define>

        <ui:define name="autocomplete"><ui:include src="../autocomplete/main.xhtml"/></ui:define>

        <ui:define name="moduleTitle">#{label.title1}</ui:define>

        <!--Segmento que define el contenido de la pagina-->
        <ui:define name="content">
            <h:body >

                <h:form id="form1">
                    <p:growl widgetVar="growl" id="messages" showDetail="true"/>  

                    <!--HISTORIAL-->
                    <fieldset class="fieldSet">
                        <legend><h4><h:outputText value="#{label.title2}"/></h4></legend>

                        <!--Historial de navegación-->
                        <div class="field">
                            <h:commandButton type="button" value="#{label.button5}" styleClass="button" onclick="if(isActive('#{message.mt21}', '#{message.m21}')){historyTable.filter();historial.show();}">
                                <f:ajax event="click" execute="@this" render="listTable"/>
                            </h:commandButton>

                            <p:dialog id="historialDBx" header="#{label.title6}" widgetVar="historial" resizable="false" modal="true">
                                <h:panelGroup id="listTable">
                                    <p:dataTable var="t" value="#{monitoring_general.navigationHistoryList}"
                                                 emptyMessage="#{message.m22}" widgetVar="historyTable"
                                                 paginatorTemplate="{FirstPageLink}
                                                 {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                                 filteredValue="#{monitoring_general.filteredHistory}"
                                                 rows="3"
                                                 paginator="true">

                                        <f:facet name="header">  
                                            <p:outputPanel>  
                                                <h:outputLabel for="globalFilter" value="#{label.field7}" styleClass="label" />  
                                                <p:inputText id="globalFilter" onkeyup="historyTable.filter();" styleClass="textfield" />  
                                            </p:outputPanel>  
                                        </f:facet>

                                        <p:column id="positionColumn" filterBy="#{t.coordenadas}"   
                                                  headerText="#{label.col1}" footerText=""
                                                  filterMatchMode="contains">  
                                            <h:outputText value="#{t.coordenadas}" />
                                        </p:column>  

                                        <p:column id="dateColumn" filterBy="#{t.fecha}"  footerText=""
                                                  headerText="#{label.col2}" filterMatchMode="contains">  
                                            <h:outputText value="#{t.fecha}" />  
                                        </p:column>

                                        <p:column id="selectColumn">
                                            <p:commandButton icon="ui-icon-search" styleClass="button" actionListener="#{monitoring_general.drawByHistoryDate(t)}"  value="#{label.button10}" update=":form1:map" />
                                        </p:column>
                                    </p:dataTable>
                                </h:panelGroup>
                            </p:dialog>
                        </div>

                        <!--Historial por rango de fecha-->
                        <div class="field">
                            <h:outputText value="#{label.field2}" class="label"/> 
                            <p:calendar id="fecha_inicial" value="#{monitoring_general.fecha_inicial}" effect="slide" navigator="true" readonlyInput="true" pattern="dd/MM/yy" yearRange="c-82:c+10" size="5"/>
                            <h:outputText class="required" value="*"/>
                            <h:outputText value="#{label.field3}" class="label"/> 
                            <p:calendar id="fecha_final" value="#{monitoring_general.fecha_final}" effect="slide" navigator="true" readonlyInput="true" pattern="dd/MM/yy" yearRange="c-82:c+10" size="5"/>
                            <h:outputText class="required" value="*"/>
                            <h:commandButton value="#{label.button6}" class="button" onclick="return isActive('#{message.mt21}', '#{message.m21}');">
                                <f:ajax event="click" listener="#{monitoring_general.drawByDateRange}" execute="fecha_inicial fecha_final" render="map"/>
                            </h:commandButton>
                        </div>

                    </fieldset>


                    <!--POSICIONAMIENTO Y MONITOREO-->
                    <fieldset class="fieldSet">
                        <legend><h4><h:outputText value="#{label.title3}"/></h4></legend>
                        <h:commandButton value="#{label.button7}" type="button" class="button" onclick="return isActive('#{message.mt21}', '#{message.m21}');">
                            <f:ajax event="click" execute="@this" listener="#{monitoring_general.drawByCurrentPosition}" render="map"/>
                        </h:commandButton> 

                        <p:poll id="poll" widgetVar="timer" autoStart="false" listener="#{monitoring_general.drawByLifeTrace}" interval="3" update="map"/>
                        <p:selectBooleanButton value="#{monitoring_general.toggled}" onLabel="#{label.button9}" offLabel="#{label.button8}" styleClass="button">
                            <p:ajax update="poll" process="@this" listener="#{monitoring_general.toggledListener}"/>
                        </p:selectBooleanButton>
                    </fieldset>

                    <!--MAPA-->
                    <fieldset class="fieldSet">
                        <legend><h4><h:outputText value="#{label.title4}"/></h4></legend>

                        <p:gmap id="map" center="#{monitoring_general.lat}, #{monitoring_general.lng}" zoom="17" type="ROADMAP" styleClass="map" model="#{monitoring_general.mapModel}">
                            <p:ajax event="overlaySelect" listener="#{monitoring_general.onMarkerSelect}" />

                            <p:gmapInfoWindow>
                                <p:outputPanel style="text-align:left;display:block;margin:auto:">  
                                    <div class="field">
                                        <h:outputLabel for="gmapInfoDate" styleClass="gmapInfoTitle" value="#{label.field8}"/>
                                        <h:outputText id="gmapInfoDate" value="#{monitoring_general.marker.title}" styleClass="label gmapInfoData" />
                                    </div>

                                    <div class="field">
                                        <h:outputLabel for="gmapInfoLocation" styleClass="gmapInfoTitle" value="#{label.field9}"/>
                                        <h:outputText id="gmapInfoLocation" value="#{monitoring_general.marker.data}" styleClass="label gmapInfoData" />
                                    </div>
                                </p:outputPanel> 
                            </p:gmapInfoWindow>
                        </p:gmap>
                        <p:commandButton value="#{label.button4}" type="clean" styleClass="button" actionListener="#{monitoring_general.clearMapModel()}" update="map"/>
                    </fieldset>

                    <!--DISPOSITIVO-->
                    <fieldset class="fieldSet">

                        <legend><h4><h:outputText value="#{label.title5}"/></h4></legend>
                        <div class="field">
                            <h:outputLabel for="usuario_nombre" value="#{label.data1}:" class="label"/>
                            <h:outputText id="usuario_nombre" value="#{monitoring_general.userBeans.nombre}" />
                        </div>

                        <div class="field">
                            <div class="field">
                                <h:outputLabel for="serie" value="#{label.data2}:" class="label"/>    
                                <h:outputText id="serie" value="#{monitoring_general.gpsBeans.numero_serie}"/>
                            </div>

                            <div class="field">
                                <h:outputLabel for="imei" value="#{label.data3}:" class="label"/>
                                <h:outputText id="imei" value="#{monitoring_general.gpsBeans.imei}"/>
                            </div>

                            <div class="field">
                                <h:outputLabel for="marca" value="#{label.data4}:" class="label"/>    
                                <h:outputText id="marca" value="#{monitoring_general.gpsBeans.marca}"/>
                            </div>

                            <div class="field">
                                <h:outputLabel for="modelo" value="#{label.data5}:" class="label"/>
                                <h:outputText id="modelo" value="#{monitoring_general.gpsBeans.modelo}"/>
                            </div>

                            <div class="field">
                                <h:outputLabel for="gps_nombre" value="#{label.data6}:" class="label"/>
                                <h:outputText id="gps_nombre" value="#{monitoring_general.gpsBeans.nombre}"/>
                            </div>

                            <div class="field">
                                <h:outputLabel for="tipo" value="#{label.data7}:" class="label"/>
                                <h:selectOneMenu id="tipo" value="#{monitoring_general.gpsBeans.tipo}" disabled="true">  
                                    <f:selectItems value="#{monitoring_general.getTypeList()}"/>
                                </h:selectOneMenu>
                            </div>

                            <div class="field">
                                <h:outputLabel for="caducidad" value="#{label.data8}:" class="label"/>
                                <h:outputText id="caducidad" value="#{monitoring_general.gpsBeans.caducidad}"/>
                            </div>
                        </div>

                        <div class="field">
                            <h:outputLabel for="detalle" value="#{label.field4}" class="label"/> 
                            <h:inputTextarea id="detalle" value="#{monitoring_general.gpsBeans.detalle}" class="textArea" readonly="true"  />
                        </div>
                    </fieldset>

                </h:form>
            </h:body>
        </ui:define>

    </ui:composition>
</html>
